<template>
    <el-row :gutter="10">
    <el-col :span="4" class="left">
      <div class="title">
        <span>丨</span>设备列表
      </div><hr>
      <ul class="device">
        <li v-for="(item,index) in recordData.deviceList" :key="index" class="li" @click="change(index)">{{ item }}</li>
      </ul>
    </el-col>


    <el-col :span="19" class="right">
      <div class="header"><span>丨</span>预警记录</div><hr>
      <div class="main">
        <div class="block">
        <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :size="size"
      />
    </div>
        
        <el-table stripe :data="tableData" height="92%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="thresholdName" label="监测指标"></el-table-column>
          <el-table-column prop="num" label="指标值"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="time" label="时间"></el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRecordData } from '@/store/Warning/Warning';
import { onMounted } from 'vue'
const recordData = useRecordData()

onMounted(()=>{
  const ul=document.querySelectorAll('.device .li')
  ul[0].classList.add('active')
})


  function change(index){
    const ul=document.querySelectorAll('.device .li')
    for(let i = 0;i<ul.length;i++){
      ul[i].classList.remove('active')      
    }    
    ul[index].classList.add('active')
    recordData.deviceChoose = ul[index].innerText
  }

</script>

<style scoped>
@import url('./Record.css');
</style>